<template>
  <div>
    <el-button type="primary" @click="getMysqlData">MySQL数据库测试</el-button>
    <el-button type="success" @click="getRedisData">Redis数据库测试</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name: ''
    }
  },
  methods: {
    //MySQL数据库测试
    getMysqlData(){
      // 发送axios异步请求
      this.$axios.get('http://localhost:8888/getAll').then(res => {
        // 弹出框提示返回的数据
        this.$alert(res.data, 'MySQL数据库测试', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            })
          }
        })
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    //Redis数据库测试
    getRedisData(){
      // 弹出框输入姓名
      this.$prompt('请输入姓名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你输入的姓名是: ' + value
        });

        //发送axios异步请求
        this.$axios.get('http://localhost:8888/getRedis/'+ value).then(res => {
          // 弹出框提示返回的数据
          this.$alert('姓名：' + res.data, 'Redis数据库测试', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              })
            }
          })
        }).catch(err => {
          return Promise.reject(err)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>
